<!--
 * @Author: your name
 * @Date: 2023-08-17 20:15:07
 * @LastEditTime: 2023-08-17 20:15:18
 * @LastEditors: your name
 * @Description: 
-->
<template>
  <div class="bubble-container" :id="id"></div>
</template>

<script>
export default {
  props: {
    id: {
      type: String,
      default: "bubbles",
    },
    list: {
      type: Array,
      default() {
        return [];
      },
    },
  },
  data() {
    return {
      loopIndex: 0,
    };
  },
  created() {
    this.initData();
  },
  methods: {
    initData() {
      setInterval(() => {
        let card = this.list[this.loopIndex];
        this.loopIndex += 1;
        if (this.loopIndex >= this.list.length) this.loopIndex = 0;
        let childId = Math.floor(new Date().getTime() * 10000000000000) + "";
        let child = this.createBubble(childId, card);
        let dom = document.querySelector(`#${this.id}`);
        dom.appendChild(child);
      }, 1000);

      setTimeout(() => {
        // 10s 后开始清理dom节点数据(从0开始)
        setInterval(() => {
          let childs = document.querySelector(`#${this.id}`).childNodes || [];
          document.querySelector(`#${this.id}`).removeChild(childs[0]);
        }, 1000);
      }, 10 * 1000);
    },
    createBubble(id, item) {
      let div = document.createElement("div");
      let riseClass = `rise${Math.floor(Math.random() * 10) + 1}`;
      div.classList.add("bubble", riseClass);
      div.style.left = Math.floor(Math.random() * 80) + "%";
      div.setAttribute("data-childId", id);
      div.setAttribute("data-id", item.id);
      let html = `<div style="width:100%;height:100%;display: flex;flex-direction: column; align-items: center;justify-content: center;">
                    <div style="font-size: 30px; font-weight: bold; line-height: 40px; color: var(--bgColor);">${item.value}</div>
                    <div style="ont-size: 18px; color: #fff">${item.name}</div>
                </div>`;
      div.innerHTML = html;
      div.addEventListener("click", this.handleClick.bind(this, item));
      return div;
    },
    // 点击事件
    handleClick(item) {
      this.$emit("change", item);
    },
  },
};
</script>

<style lang="scss">
@import "@/assets/styles/bubble.scss";

.bubble-container {
  width: 100%;
  height: 100%;
  position: relative;
}
</style>